<template>
  <div class="control-section" v-if="optionData.length > 0">
    <div class="control-legend">
      <div class="legend-item" v-for="(item, index) in optionData" :key="index">
        <div class="title">
          <span class="dot"></span>
          <span class="text">{{ item.name }}单位</span>
        </div>
        <div class="num">
          <span style="font-size: 16px">{{ item.value }}</span
          >家
        </div>
      </div>
    </div>
    <div
      class="control-echats"
      :style="{
        backgroundPosition: screenHeight > 1000 ? '-4px -3px' : '-2px -31px',
      }"
    >
      <div id="controlAreaCharts" ref="controlAreaCharts"></div>
    </div>
  </div>
  <div class="empty" v-else>暂无数据</div>
</template>
<script setup>
import { onMounted, ref, inject } from "vue";
import { getPie3D } from "./echarts.js";
import echarts from "@/utils/echarts";
const color = ["#009F21", "#00D8FF", "#ec8e00", "#476bea"];
let screenHeight = ref(document.body.clientHeight);
let optionData = ref([]);
// 初始化label样式
const setLabel = () => {
  if (optionData.length == 0) {
    optionData.value = [];
  }
  optionData.value.forEach((item, index) => {
    item.itemStyle = {
      color: color[index],
    };
    item.label = {
      show: false,
    };
    item.labelLine = {
      lineStyle: {
        width: 1,
        color: "rgba(255,255,255,0.1)",
      },
    };
  });

  initChart();
};
const controlAreaCharts = ref(null);
let statusChart = null;
// 图表初始化
const initChart = () => {
  statusChart = null;
  let option = null;
  echarts.init(controlAreaCharts.value).dispose();
  statusChart = echarts.init(controlAreaCharts.value);
  // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
  // option = getPie3D(optionData.value, 0.8, 150, 32, 10, 0.5);
  //   optionData.value.map((item) => {
  //     item.value++;
  //   });
  let result = optionData.value.findIndex((item) => item.value === 0);
  const max = optionData.value.reduce(
    (maxValue, obj) => Math.max(maxValue, obj.value),
    -Infinity
  );
  const min = optionData.value.reduce(
    (min, obj) => Math.min(min, obj.value),
    optionData.value[0].value
  );
  let pieHeight = 3;
  if (result === -1) {
    pieHeight = 10;
  } else {
    pieHeight = 2;
  }
  option = getPie3D(optionData.value, 0, 240, 25, pieHeight, 1);
  statusChart.setOption(option);
  // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption

  option.series.push({
    name: "pie2d", //自己根据场景修改
    backgroundColor: "transparent",
    type: "pie",
    label: {
      opacity: 1,
      fontSize: 13,
      lineHeight: 40,
    },
    startAngle: -40, // 起始角度，支持范围[0, 360]。
    // clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ["30%", "50%"],
    center: ["50%", "50%"],
    data: optionData.value,
    itemStyle: {
      opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
    },
    cursor: "default", // 鼠标样式
  });
  statusChart.setOption(option);
};
//各管控区统计
const accept = async (info) => {
  // optionData.value = [
  //   { name: "核查", value: 50 },
  //   { name: "处置", value: 100 },
  //   { name: "驱离", value: 60 },
  // ];
  optionData.value = info;
  if (optionData.value.length > 0) {
    nextTick(() => {
      setLabel();
    });
  }
};
/**
 * @description: 图表自适应
 */
const resize = () => {
  setTimeout(() => {
    screenHeight.value = document.body.clientHeight;
  }, 0);
  if (statusChart) {
    statusChart.resize();
  }
};
defineExpose({ resize, accept });
</script>

<style lang="scss" scoped>
.control-section {
  position: relative;
  display: flex;
  width: 100%;
  height: calc(100% - 30px);
  .control-legend {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 40%;
    .legend-item {
      color: #ffffff;
      font-size: 12px;
      .title {
        margin-bottom: 3px;
        .dot {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #10a840;
          margin-right: 10px;
        }
      }
      .num {
        display: flex;
        justify-content: flex-end;
        font-family: DigifaceWide;
        align-items: baseline;
        color: #10a840;
      }
    }
    .legend-item:nth-child(2) {
      .title {
        .dot {
          background-color: #008de5;
        }
      }
      .num {
        color: #008de5;
      }
    }
    .legend-item:nth-child(3) {
      .title {
        .dot {
          background-color: #ec8e00;
        }
      }
      .num {
        color: #ec8e00;
      }
    }
  }
  .control-echats {
    background: url("@/assets/images/chartBase.png") no-repeat;
    background-size: 100%;
    background-position: 0% 0%;
    display: flex;
    flex-direction: column;
    color: #fff;
    width: 60%;
    height: calc(100%);
    position: relative;
  }
  #controlAreaCharts {
    width: 100%;
    height: 100%;
  }
  .num-box {
    position: absolute;
    display: flex;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    top: 55%;
    height: 25px;
    width: 46%;
    margin: 0 auto;
    p {
      :deep(.countup-wrap) > span {
        font-size: 20px;
        font-family: DigifaceWide;
        color: #ffffff;
        line-height: 25px;
      }
    }
  }
}
.empty {
  color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 30px);
}
</style>
